import { useModel } from "umi";
import { Modal, message, Image as AntdImage, Row, Col, Upload, Button, Descriptions, Form, Input, Radio, Select, DatePicker, Space } from "antd";
import { SaveOutlined, DeleteOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import dayjs from "dayjs";
import { useReactive } from "ahooks";

import useAllPositions from "../../hooks/position/useAllPositions";
import useAllStaffs from "../../hooks/staff/useAllStaffs";
import useUpdateStaff from "../../hooks/staff/useUpdateStaff";
import useCheckStaffPhone from "../../hooks/staff/useCheckStaffPhone";

const EditStaff = ({ staff, reloadData }) => {
    const [form] = Form.useForm();
    const { onCloseGlobalModal } = useModel("global.modal");

    const { loading: positionLoading, positions } = useAllPositions();
    const { loading: staffLoading, staffs } = useAllStaffs({ osType: "正式", osStat: true });
    const { loading, updateStaff } = useUpdateStaff();
    const { checkStaffPhone } = useCheckStaffPhone();

    const state = useReactive({
        selectDeInfo: null,
    });

    let onFinish = async (values) => {
        values.osUuid = staff.osUuid;
        values.omBirt = values.omBirt ? values.omBirt.format("YYYY-MM-DD") : null;
        values.deInfo = state.selectDeInfo ? { osUuid: state.selectDeInfo.osUuid, osName: state.selectDeInfo.osName, omUuid: state.selectDeInfo.omUuid } : {};
        updateStaff(values, (res) => {
            if (res) {
                message.success("成功更新员工信息");
                reloadData();
                onCloseGlobalModal();
            }
        });
    };

    const phoneValidator = async (rule, osPhon) => {
        if (osPhon && /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(osPhon)) {
            let res = await checkStaffPhone({ osPhon });
            if (res === null) return Promise.reject("检查员工手机号出错");
            return res > 0 ? Promise.reject("手机号已被使用！") : Promise.resolve();
        } else {
            state.disabledAuthCode = true;
            return Promise.reject("请输入正确的手机号");
        }
    };

    return (
        <Form
            form={form}
            onFinish={onFinish}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            initialValues={{
                ...staff,
                deInfo: staff.deInfo?.osUuid || undefined,
                osBirt: staff.osBirt ? dayjs(staff.osBirt) : undefined,
            }}
            style={{ padding: "10px 0" }}
        >
            <Form.Item label="姓名" name="osName" rules={[{ required: true }]}>
                <Input placeholder="请输入" />
            </Form.Item>

            <Form.Item label="手机号" name="osPhon" validateTrigger="onBlur" rules={[{ required: true, validator: phoneValidator }]}>
                <Input placeholder="请输入" maxLength={11} />
            </Form.Item>

            <Form.Item label="性别" name="osRoge" rules={[{ required: true }]}>
                <Radio.Group>
                    <Radio value="男">男</Radio>
                    <Radio value="女">女</Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="员工类型" name="osType" rules={[{ required: true }]}>
                <Radio.Group>
                    <Radio value="正式">正式</Radio>
                    <Radio value="兼职" disabled>
                        兼职
                    </Radio>
                    <Radio value="临时工" disabled>
                        临时工
                    </Radio>
                    <Radio value="实习生" disabled>
                        实习生
                    </Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="当前职位" name="opUuid">
                <Select placeholder="请选择" loading={positionLoading}>
                    {positions.map(({ opUuid, opName }) => (
                        <Select.Option key={opUuid} value={opUuid}>
                            {opName}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <Form.Item label="直属上级" name="deInfo">
                <Select placeholder="请选择" loading={staffLoading} onSelect={(value) => (state.selectDeInfo = staffs.find((item) => item.osUuid === value))}>
                    {staffs.map(({ osUuid, osName }) => (
                        <Select.Option key={osUuid} value={osUuid}>
                            {osName}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <Form.Item label="身份证号" name="osIdnu">
                <Input placeholder="请输入" />
            </Form.Item>

            <Form.Item label="生日" name="osBirt">
                <DatePicker placeholder="请选择" />
            </Form.Item>

            <Form.Item label="民族" name="osNati">
                <Select placeholder="请选择">
                    {nationJson.map(({ value, label }) => (
                        <Select.Option key={value} value={label}>
                            {label}
                        </Select.Option>
                    ))}
                </Select>
            </Form.Item>

            <div style={{ textAlign: "center" }}>
                <Space>
                    <Button loading={loading} type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button loading={loading} onClick={form.resetFields}>
                        重置
                    </Button>
                    <Button loading={loading} onClick={onCloseGlobalModal}>
                        取消
                    </Button>
                </Space>
            </div>
        </Form>
    );
};

export default EditStaff;
